<!DOCTYPE html>
<html lang="en">
<head>
    <title>Workbook</title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale = 1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../assets/css/idox/style.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

    <!-- iOS Homescreen Launch Screens -->
    <!-- iPhone 320x460 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="../assets/img/idox/launch-img/iphone.png">
    <!-- iPhone Retina 640x920 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/iphone-hires.png">
    <!-- iPad Portrait 768x10*0*4 -->
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)"
          href="../assets/img/idox/launch-img/ipad-portrait.png">

    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)"
          href="../assets/img/idox/launch-img/ipad-landscape.png">

    <!-- iPad Landscape 748x1024
    <link rel="apple-touch-startup-image"
          media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/ipad-portrait-hires.png">
    -->
    <!-- iPad Portrait Retina 1536x2008
    <link rel="apple-touch-startup-image"
          media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/ipad-landscape-hires.png">
    -->
    <!-- iPad Landscape Retina 1496x2048 -->


    <!--debug-->
    <script src="http://debug.phonegap.com/target/target-script-min.js#shadowbeam"></script>
</head>

<body>

<header id="app-header" class="navbar-inverse">
    <div class="navbar-inner container-fluid center">

        <div class="pull-left">
            <a href="#">
                <img id="idox-logo" class="pull-left" src="../assets/img/idox/mesh.png"/>
                <span class="brand">Workbook</span>
            </a>
        </div>

        <div id="top-buttons" class="stage-animation pull-right">
            <div id="search-button" class="menu-btn"><i class="idox-icon-search"></i></div>
            <div id="profile-button" class="menu-btn"><i class="idox-icon-profile"></i></div>
            <div id="messages-button" class="menu-btn "><i class="idox-icon-messages"></i></div>
        </div>

        <div id="simple-search" class="center hide-mobile">
            <form class="navbar-form form-search form-inline">

                <div id="advanced-search-button" class="menu-btn"><i class="idox-icon-advsearch"></i></div>
                <input id="simple-search-input" tabindex="1" type="text" placeholder="s"
                       class="input-large search-query">

            </form>
        </div>

    </div>
</header>

<div id="app-body" class="scrolling">

<section id="dashboard" class="page current">
    <ul class="swipe-wrapper">
        <div class="swipe-page">
            <div class="inner">
                <h1>Home</h1>
                <ul class="thumbnails">
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place300x200.jpg"
                                                                          alt=""> </a></li>
                </ul>
            </div>
        </div>
        <div class="swipe-page">
            <div class="inner">
                <h2>Workbook</h2>

                <p>Use this document as a way to quick start any new project. <br>
                    All you get is this message and a barebones HTML document.</p>
                <ul class="thumbnails">
                    <li class="span4"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place350x250.png"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                    <li class="span2"><a href="#" class="thumbnail"> <img src="../assets/img/idox/place160x120.jpg"
                                                                          alt=""> </a></li>
                </ul>
            </div>
        </div>
        <div class="swipe-page">
            <div class="inner">
                <h2>Inbox</h2>

                <div id='mini-slider1' class=' widget'>
                    <ul>
                        <li style='display:block'>
                            <div>1</div>
                        </li>
                        <li style='display:none'>
                            <div>2</div>
                        </li>
                        <li style='display:none'>
                            <div>3</div>
                        </li>
                        <li style='display:none'>
                            <div>4</div>
                        </li>
                        <li style='display:none'>
                            <div>5</div>
                        </li>
                    </ul>
                </div>
                <div id='mini-slider2' class=' widget'>
                    <ul>
                        <li style='display:block'>
                            <div>1</div>
                        </li>
                        <li style='display:none'>
                            <div>2</div>
                        </li>
                        <li style='display:none'>
                            <div>3</div>
                        </li>
                        <li style='display:none'>
                            <div>4</div>
                        </li>
                        <li style='display:none'>
                            <div>5</div>
                        </li>
                    </ul>
                </div>
                <div id='mini-slider3' class=' widget'>
                    <ul>
                        <li style='display:block'>
                            <div>1</div>
                        </li>
                        <li style='display:none'>
                            <div>2</div>
                        </li>
                        <li style='display:none'>
                            <div>3</div>
                        </li>
                        <li style='display:none'>
                            <div>4</div>
                        </li>
                        <li style='display:none'>
                            <div>5</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="swipe-page">
            <div class="inner">
                <h2>Calendar</h2>
            </div>
        </div>
    </ul>
</section>

<section id="search-results-page" class="page">

    <div class="search-controls center">
        <div class="menu-btn grid-view-btn active pressed"><i class="idox-icon-grid-view"></i></div>
        <div class="menu-btn list-view-btn"><i class="idox-icon-list-view"></i></div>
        <div class="menu-btn filter-btn"><i class="idox-icon-filter"></i></div>
    </div>

    <section id="search-results-grid-view" class="page grid-view current">
        <div id="search-results-swipe" class="center">
            <ul class="swipe-wrapper"></ul>
        </div>
    </section>

    <section class="list-view page">
        <table class="table list-view">
            <thead>
            <tr>
                <th>Title</th>
                <th>ID</th>
                <th>Date</th>
                <th>Revision</th>
                <th>State</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </section>
</section>

<section id="full-document-page" class="row-fluid page">

    <div id="search-results-side-wrapper" class="scrolling hidden-phone pull-left">
        <section id="search-results-side"></section>
    </div>

    <div id="full-document" class=" scrolling span7">

        <div class="search-controls center">
            <div class="back-to-results-button"><i class="menu-btn idox-icon-undo"></i></div>
        </div>

        <span class="loading-bg">Loading</span>

        <img id="full-document-image" src=""/>
    </div>

    <div id="tab-wrapper" class="span2">
        <div id="doc-tabs" class="tabbable">
            <ul class="nav nav-tabs nav-stacked">
                <li><a href="#tab1" data-toggle="tab">Information</a></li>
                <li><a href="#tab2" data-toggle="tab">History</a></li>
                <li><a href="#tab3" data-toggle="tab">Security</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                    <p>Howdy, I'm in Section 2.</p>

                </div>
                <div class="tab-pane" id="tab3">
                    <p>Section 3.</p>
                </div>
            </div>
        </div>

    </div>

</section>

</div>
<!--/#app-body-->

<footer id="app-footer" class="hide-mobile navbar navbar-inverse">
    <div class="navbar-inner center">
        <div class="btn-prev pull-left"><i class="idox-icon-arrow-left"></i></div>
        <div class="btn-next pull-right"><i class="idox-icon-arrow-right"></i></div>

        <ul id="dashboard-slider-tabs" class="nav center">
            <li tabindex="0" class="active"><a href="#">Home</a></li>
            <li tabindex="1" class=""><a href="#">Work</a></li>
            <li tabindex="2" class=""><a href="#">Inbox</a></li>
            <li tabindex="3" class=""><a href="#">Calendar</a></li>
        </ul>

        <div id="search-results-bullets" class="center"></div>

    </div>

</footer>
<!--/#app-footer-->

<div id="advanced-search" class="up-stage stage-animation scrolling panel center">
    <div id="advanced-search-inner-wrapper">

        <form id="advanced-search-form" class="form-horizontal container">
            <div class="row-fluid">

                <fieldset class="span4">

                    <input type="text" class="input-large" id="input01" placeholder="Text input">
                    <input type="text" class="input-large" id="input02a" placeholder="Text input">
                    <input type="text" class="input-large" id="input02b" placeholder="Text input">
                    <input type="text" class="input-large" id="input03" placeholder="Text input">

                </fieldset>

                <fieldset class="span4">


                    <input type="text" class="input-large" id="input05" placeholder="Text input">


                    <select multiple="multiple" class="input-large" id="multiSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>

                        <select id="select04" class="input-large">
                            <option selected disabled>Select List</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </select>

                </fieldset>


                <fieldset class="span4">

                    <input type="text" class="input-large" id="input07" placeholder="Text input">

                    <input type="text" class="input-large" id="input08" placeholder="Text input">

                    <input type="text" class="input-large" id="input09" placeholder="Text input">


                    <select id="select01" class="input-large">
                        <option selected disabled>Select List</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>

                </fieldset>

                <fieldset class="span12">
                    <div class="pull-right" style="margin:0;">
                        <button type="button" id="advanced-search-close-button" class="btn close-adv-search">Close
                        </button>
                        <button type="button" id="advanced-search-submit-button" href="#loadingModal" type="button"
                                class="btn btn-primary close-adv-search">Search
                        </button>
                    </div>
                </fieldset>


            </div>
        </form>
    </div>
</div>
<!--/advanced-search-->


<div id="messages-window" class="panel stage-right resizable scrolling stage-animation">

    <div class="messages-window-header">
        <i class="idox-icon-fullscreen pull-left full-screen-button hide-mobile menu-btn"></i>

    </div>

    <div id="messages-wrapper">

        <div id="messages" class="messages">
            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">
                    A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message to">
                <header class="box">
                    <time class="pull-right">2012-08-10</time>

                </header>
                <p class="message-body">
                    Your reply. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
                    convallis rutrum auctor. Etiam enim neque, ultrices sit amet vestibulum vel, iaculis sit amet erat.
                    Ut libero nunc, ultrices eget blandit eu, dictum ut mauris.

                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">
                    A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message to">
                <header class="box">
                    <time class="pull-right">2012-08-10</time>

                </header>
                <p class="message-body">Your reply. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
                    convallis rutrum auctor. Etiam enim neque, ultrices sit amet vestibulum vel, iaculis sit amet erat.
                    Ut libero nunc, ultrices eget blandit eu, dictum ut mauris.

                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">
                    A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">
                    A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

        </div>
    </div>

    <div class="message-reply">
        <form id="message-reply-form" class="navbar-form form-search form-inline" onSubmit="return false;">
            <fieldset>

                <textarea tabindex="-1" id="message-reply-field" type="text"
                          class="input"></textarea>

                <button id="message-reply-button" class="btn btn-primary" type="button">Send</button>
            </fieldset>
        </form>

    </div>


</div>
<!--/messages-->


<div class="modal" id="loadingModal" style="display:none;">
    <div>
        <p align="center"><i class=" idox-icon-delicious anim-rotate" data-icon="$"></i></p>

        <p align="center">Loading...</p>
    </div>
</div>
<!--/modal-->

<div id="profile" class="panel stage-left stage-animation">
    <div class="profile-header"><h2 class="hidden-phone">Profile</h2></div>
    <p>Swipe from right to left to close</p>

</div>
<!--/Profile-->

<div id="filter" class="panel up-stage stage-animation">
    <form class="form-actions">
        <label>State</label>
        <select class="span3">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>

        <label>Revision</label>
        <input class="span3" type="number"/>

        <label>Date</label>
        <input class="span3" type="date">

        <fieldset>
            <button id="filter-close-button" type="button" class="btn filter-btn">Close</button>
            <button id="filter-apply-button" type="button" class="btn filter-btn btn-primary">Apply</button>
        </fieldset>

    </form>

</div>
<!--/Filter-->


<!-- Le javascript===================================-
->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>

<!---idox scripts -->
<script src="../assets/js/idox/modernizr.js"></script>


</body>
</html>